<template>
  <div id="app">
    <NavBar/>
    <!-- <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div style="height:100px"></div>
    <Footer/>
    <Loading v-show="loading"/>
  </div>
</template>

<script>
import NavBar from './components/NavBar'
import Landing from './components/Landing'
import Footer from './components/Footer'
import Loading from './components/common/Loading'
import jwt_decode from 'jwt-decode'

export default {
  name: 'App',
  components:{
    NavBar,
    Landing,
    Footer,
    Loading
  },
  computed:{
    loading(){
      return this.$store.getters.loading;
    }
  },
  created() {
    if(localStorage.jwtToken){
      const decoded = jwt_decode(localStorage.jwtToken);
      // 获取到当前时间
      const currentTime = Date.now() / 1000;
      // 检测token是否过期
      if (decoded.exp < currentTime) {
        // this.$store.dispatch("setIsAutnenticated",false);
        // this.$store.dispatch("setUser",{});
        this.$store.dispatch("clearCurrentState");
        this.$router.push("/login");
      }else{
        // 分发action更改store的state
        this.$store.dispatch("setIsAutnenticated",!this.isEmpty(decoded));
        this.$store.dispatch("setUser",decoded);
      }
      
    }
  },
  methods:{
     isEmpty (value) {
               return 
                  value === undefined || 
                  value === null || 
                  (typeof value === "object" && Object.keys(value).length === 0) || 
                  (typeof value === "string" && value.trim().length === 0)
             }
  }
}
</script>

<style>
NavBar{
 position: fixed !important;
  top: 0;
  left: 0;
  right: 0; 
  width: 100%;
}
Footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
